
.split-pane {

  --split-pane-header-height: 32px;
  --split-pane-sidebar-list-item-selected-bg-color: var(--tabs-header-selected-bg-color);
  --split-pane-sidebar-list-item-selected-text-color: var(--tabs-header-selected-text-color);
  --split-pane-sidebar-list-item-hover-bg-color: var(--sidebar-selected-color);

  display: flex;
  width: 100%;
  overflow: hidden;
  color: var(--text-color);

  * {
    scrollbar-color: var(--sidebar-scroll-thumb-color) transparent;
  }

  .sp-sidebar {
    
    /* concrete windows should probably override
      the flex with their desired width */
    
    flex: 0 0 200px;
    overflow-x: hidden;
    background-color: var(--sidebar-bg-color);
    border-right: 1px solid var(--sidebar-border-color);
    color: var(--sidebar-text-color);
    display: flex;
    flex-direction: column;
    padding: 1rem 0rem;
    gap: 1rem;

    * > .icon, .icon {
      margin: 0rem 0.5rem;
      display: inline-block;
    }

    .icon {
      color: var(--sidebar-icon-color);
      cursor: pointer;

      &:has(span) svg {
        margin-right: 4px;
      }

      &:last-child {
        margin-right: 0px;
      }
      
    }
    
    header {

      flex: 0 var(--split-pane-header-height);
      background-color: var(--sidebar-bg-color);
      padding: 0rem 1rem;
      display: flex;
      flex-direction: row;
      align-items: center;

      .form {
        flex: 1;
      }

      .title {
        flex: 1;
        font-size: 17px;
        font-weight: 600;
        color: var(--text-color);
      }
    
      .actions {
        display: flex;
        justify-content: flex-end;
        opacity: 0.7;
        gap: 8px;
      }

      .icon {
        width: var(--icon-md);
        height: var(--icon-md);
      }
    }

    main {

      flex: 1;
      padding: 0rem 1rem;
      overflow-y: hidden;
      display: flex;
      flex-direction: column;

      .sp-sidebar-title {
        font-size: 110%;
        font-weight: var(--font-weight-medium);
        color: var(--sidebar-text-color);
        margin-bottom: 1rem;
      }

    }

    footer {

      padding: 0rem 1rem;
      font-size: 14.5px;
      display: flex;
      flex-direction: row;
      justify-content: flex-end;

      &:has(button:only-child) {
        justify-content: center;
        button {
          width: 100%;
          &.cta {
            border-radius: var(--radius-md);
          }
        }
      }

    }

  }

  .sp-main {
    
    flex: 1;
    display: flex;
    flex-direction: column;
    background-color: var(--background-color);
    overflow: hidden;
    min-width: 0;

    header {
      
      flex: 0 var(--split-pane-header-height);
      padding: 1rem;
      display: flex;
      flex-direction: row;
      align-items: center;
      gap: 0.5rem;
      
      .title {
        flex: 1;
        font-size: 17px;
        font-weight: var(--font-weight-medium);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .icon {
        flex-shrink: 0;
        cursor: pointer;
        text-align: right;
        width: var(--icon-md);
        height: var(--icon-md);
        color: var(--chatarea-toolbar-icon-color);
        margin-left: auto;
        opacity: 0.7;

        &.disabled {
          opacity: 0.5;
          pointer-events: none;
        }

        ~ .action {
          margin-left: 0px;
        }

        &.back {
          color: var(--text-color);
          transform: scale(150%);
        }
        
      }

      &:has(input) {

        padding-top: 1rem;
        padding-bottom: 1rem;

        .icon {
          display: none
        }

        input {
          flex: 1;
          padding: 0.25rem;
          background: #fafafa;
          color: var(--color-text);
          font-size: inherit;
          font-family: inherit;
        }

        .actions {
          display: flex;
          gap: 0.25rem;
          .icon {
            display: block;
            width: var(--icon-lg);
            height: var(--icon-lg);
            cursor: pointer;
          }
        }
      }

    }

    main {

      flex: 1;
      display: flex;
      flex-direction: column;
      overflow-y: auto;
      transition: transform 0.3s cubic-bezier(0.4, 0.0, 0.2, 1), opacity 0.3s;
      box-sizing: border-box;

      &.hidden {
        display: none;
      }

      &.sliding-root {
        display: none;
        &.visible {
          display: flex;
        }
      }

      &.sliding-pane {
      
        position: absolute;
        top: var(--split-pane-header-height);
        z-index: -20;
        display: flex;

        opacity: 0;
        width: 100%;
        transform: translateX(100%);

        &.visible {
          opacity: 1;
          z-index: 20;
          transform: translateX(0%);
        }
      
      }

      &:has(.master-detail) {
        padding: 0;
        min-width: auto;
        align-self: stretch;
      }

      &:has(.list-actions, .sticky-table-container) {
        .list-actions, .sticky-table-container {
          max-width: 800px;
        }
      }

      &:has(.sticky-table-container) {

        min-width: auto;
        align-self: stretch;

        .list-actions {
          
          box-sizing: border-box;
          padding: 0.875rem;
          margin-bottom: 0px;
          border: 1px solid var(--border-color);
          border-bottom: 0px;
          background: color-mix(in srgb, var(--border-color), transparent 80%);
          
          display: flex;
          flex-direction: row;
          align-items: center;
          gap: 1rem;
          
          .list-action {
            font-size: 14px;
            display: flex;
            flex-direction: row;
            align-items: center;
            gap: 0.25rem;
            cursor: pointer;

            &.menu {
              flex-direction: column;
              div {
                width: 1rem;
                border-top: 1px solid var(--text-color);
              }
            }
          }
        }

        .sticky-table-container {
          
          th {
            font-weight: var(--font-weight-semibold);
          }
        
          td button {
            font-size: 8px !important;
            padding: 2px 8px;
          }

        }
      }
    
    }

  }

  &:not(:has(.sp-sidebar)) {
    .sp-main {
      header {
        .title {
          font-size: 17px;
        }

      }
    }
  }

}

/* .macos {
  .split-pane {
    .sp-sidebar {
      header {
        padding-left: 2.5rem;
      }
    }
  }
} */

.windows {
  .split-pane {
    .sp-main {
      header {
        .menu {
          margin-top: 1px;
        }
      }
    }
  }
}

.linux {
  .split-pane {
    .sp-main {
      header {
        .menu {
          margin-top: 0px;
        }
      }
    }
  }
}

.fullscreen-drawer .split-pane {

  --drawer-pane-bg-color: var(--color-surface);

  .sp-sidebar {

    background-color: var(--drawer-pane-bg-color);

    header {
      background-color: var(--drawer-pane-bg-color);
      border: none;
      .title {
        font-weight: var(--font-weight-medium);
        font-size: 20px;
      }
    }

    main {
      border-right: none;
      .list-item {
        &.selected {
          background-color: #F0F0F0 !important;
        }
      }
    }

  }

  .sp-main {

    header {
      border: none;
      gap: 1rem;
      .title {
        font-size: 22px;
      }
      &:has(input) {
        padding-top: 1.105rem;
        padding-bottom: 1.105rem;
      }
      .icon {
        width: var(--icon-lg);
        height: var(--icon-lg);
      }
    }

  }

}